<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/5/19 0019
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生退宿管理系统</title>
    <!-- 引用Bootstrap 5样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .nav-tabs {
            margin-bottom: 20px;
        }

        .card {
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-section {
            max-width: 600px;
            margin: 0 auto;
        }

        .susu {
            border: none;
            width: 151px;
            height: 42px;
            background-color: #165dc5;
            color: white;
            position: absolute;
            left: 83%;
            top: 55px;
        }
    </style>
    <style>
        /* 添加在已有的style标签内 */
        .pagination-info {
            font-size: 14px;
            color: #6c757d;
            padding: 8px 0;
            text-align: center;
            width: 100%;
        }

        .pagination {
            margin-top: 10px;
        }

        .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }

        .page-link {
            color: #0d6efd;
        }
    </style>
</head>
<body>
<div class="container py-4">
    <!-- 操作导航 -->
    <ul class="nav nav-tabs" id="myTab">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#unbind">解除绑定</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#reason">退宿登记</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#history">历史记录</a>
        </li>
    </ul>

    <!-- 解除绑定模块 -->
    <div class="tab-content">
        <div class="tab-pane fade show active" id="unbind">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">床位解绑操作</h5>
                </div>
                <div class="card-body form-section">
                    <form action="" method="post" >
                        <div class="mb-3">
                            <label class="form-label">学号</label>
                            <input type="text" name="target" id="studentId" class="form-control"

                                   placeholder="输入学号">
                        </div>
                        <a type="submit" class="btn btn-danger w-100" onclick="processUnbind()">
                            <i class="bi bi-eject"></i> 立即解绑
                        </a>
                    </form>
                </div>
            </div>
        </div>

        <!-- 退宿登记模块 -->
        <div class="tab-pane fade" id="reason">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">退宿原因登记</h5>
                </div>
                <div class="card-body form-section">
                    <form action="" method="post">
                        <div class="mb-3">
                            <label class="form-label">退宿类型：</label>
                            <select name="reasonType" class="form-select" required id="reasonType">
                                <option value="">请选择类型</option>
                                <option value="毕业离校">🎓 毕业离校</option>
                                <option value="宿舍调整">🔄 宿舍调整</option>
                                <option value="违纪退宿">⚠️ 违纪退宿</option>
                                <option value="其他原因">❓ 其他原因</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">详细说明：</label>
                            <textarea name="detail" class="form-control"  id="detail"

                                      minlength="50" required></textarea>
                        </div>
                        <a type="submit" class="btn btn-success w-100" id="registration" onclick="aa()">
                            <i class="bi bi-check2-circle"></i> 提交登记
                        </a>
                    </form>
                </div>
            </div>
        </div>

        <!-- 历史记录模块 -->
        <div class="tab-pane fade" id="history">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">退宿记录查询</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="operator" style="width: 80%;" placeholder="输入学号">
                        <button type="button" class="susu" id="Search">搜索</button>
                    </div>
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>学号</th>
                            <th>退宿时间</th>
                            <th>操作人</th>
                            <th>退宿类型</th>
                            <th>详细</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${checkoutList}" var="log">
                            <tr>
                                <td>${log.student_number}</td>
                                <td>${log.checkout_time}</td>
                                <td>${log.operator}</td>
                                <td><span class="badge bg-primary">${log.checkout_type}</span></td>
                                <td>
                                  ${log.detail}
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <!-- 分页示例 -->
                    <!-- 修改分页导航部分 -->
                    <nav>
<%--                        <div class="d-flex justify-content-between align-items-center mb-3">--%>
<%--                            <div id="pageInfo" class="text-muted">第1页/共1页</div>--%>
<%--                        </div>--%>
                        <ul class="pagination justify-content-center" id="paginationList">
                            <!-- 分页按钮将通过JavaScript动态生成 -->
                        </ul>
                    </nav> 
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 脚本引用 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var studentId;
    function processUnbind() {


        // 获取学号
         studentId = document.getElementById('studentId').value;

        // 确认对话框
        $('#myTab li:eq(1) a').tab('show')
    }
    function aa(){
console.log(studentId);
        var reasonType = document.getElementById('reasonType').value;
        var detail = document.getElementById('detail').value;
        $.get("<%=request.getContextPath()%>/Checkout_recordsController", {
            op: "add",
            studentId:studentId,
            reasonType:reasonType,
            detail:detail,
        }, function (data) {
           alert("添加")
        });

    }
</script>

<script>
    // 全局分页变量
    var currentPage = 1;
    var totalPages = 1;

    // 页面加载时初始化数据
    $(document).ready(function() {
        loadPageData(1);
    });

    // 加载分页数据
    function loadPageData(page) {
        currentPage = page;
        let operator = $('#operator').val();

        $.ajax({
            url: '<%=request.getContextPath()%>/check_OutController',
            type: 'POST',
            data: {
                op: 'tscx',
                page: page,
                pageSize: 2,
                operator: operator  // 参数名与后端一致
            },
            success: function(data) {
                debugger
                try {
                    const tbody = $('tbody');
                    let jsonData = typeof data === 'string' ? JSON.parse(data) : data;
                    tbody.empty();

                    if(jsonData && jsonData.list && jsonData.list.length > 0) {
                        let row = "";
                        $.each(jsonData.list, function(index, log) {
                            row += '<tr>' +
                                '<td>' + (log.student_number || '') + '</td>' +
                                '<td>' + (log.checkout_time || '') + '</td>' +
                                '<td>' + (log.operator || '') + '</td>' +
                                '<td><span class="badge bg-primary">' + (log.checkout_type || '') + '</span></td>' +
                                '<td>' + (log.detail || '') + '</td>' +
                                '</tr>';
                        });
                        tbody.append(row);

                        // 更新分页信息
                        totalPages = jsonData.totalPages || 1;
                        updatePagination(jsonData);
                    } else {
                        tbody.html('<tr><td colspan="5" class="text-center">没有找到匹配的记录</td></tr>');
                    }
                } catch(e) {
                    console.error('JSON解析错误:', e);
                    alert('数据加载失败，请稍后再试');
                }
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', status, error);
                alert('请求失败: ' + error);
            }
        });
    }

    // 更新分页控件 - 参考student.jsp的实现
    function updatePagination(data) {
        // 确保data对象存在且包含必要属性
        if(!data || !data.page || !data.totalPages) {
            console.error('分页数据不完整:', data);
            return;
        }

        // 更新分页信息显示
        $("#pageInfo").text('第 ' + data.page + ' 页/共 ' + data.totalPages + ' 页')
            .addClass("pagination-info")
            .css({
                'font-weight': 'bold',
                'color': '#495057'
            });
        
        // 更新页码按钮
        const $pagination = $('#paginationList');
        $pagination.empty();
        
        // 上一页按钮
        const prevDisabled = data.page <= 1 ? 'disabled' : '';
        // 原模板字符串替换为字符串拼接
        $pagination.append('<li class="page-item ' + prevDisabled + '"><a class="page-link" href="#" onclick="loadPageData(' + (data.page - 1) + '); return false;">上一页</a></li>');
        
        // 页码按钮 - 显示当前页前后各2页
        let startPage = Math.max(1, data.page - 2);
        let endPage = Math.min(data.totalPages, data.page + 2);
        
        if(startPage > 1) {
            // 原模板字符串替换为字符串拼接
            $pagination.append('<li class="page-item"><a class="page-link" href="#" onclick="loadPageData(1); return false;">1</a></li>');
            if(startPage > 2) {
                // 原模板字符串替换为字符串拼接
                $pagination.append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
            }
        }
        
        for(let i = startPage; i <= endPage; i++) {
            const active = i == data.page ? 'active' : '';
            // 原模板字符串替换为字符串拼接
            $pagination.append('<li class="page-item ' + active + '"><a class="page-link" href="#" onclick="loadPageData(' + i + '); return false;">' + i + '</a></li>');
        }
        
        if(endPage < data.totalPages) {
            if(endPage < data.totalPages - 1) {
                // 原模板字符串替换为字符串拼接
                $pagination.append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
            }
            // 原模板字符串替换为字符串拼接
            $pagination.append('<li class="page-item"><a class="page-link" href="#" onclick="loadPageData(' + data.totalPages + '); return false;">' + data.totalPages + '</a></li>');
        }
        
        // 下一页按钮
        const nextDisabled = data.page >= data.totalPages ? 'disabled' : '';
        // 原模板字符串替换为字符串拼接
        $pagination.append('<li class="page-item ' + nextDisabled + '"><a class="page-link" href="#" onclick="loadPageData(' + (data.page + 1) + '); return false;">下一页</a></li>');
    }

    // 搜索功能
    $('#Search').click(function() {
        loadPageData(1); // 搜索时重置到第一页
    });
</script>
</body>
</html>
